<template>
    <fieldset>
        <legend>{{ $store.state.product.name }}</legend>
        <ul>
            <li v-for="item in products" :key="item.id">
                <b>产品名称:{{ item.title }}</b>
                -----
                <b>价格:{{ item.price }}</b>
                -----
                <b>库存:{{ item.inventory }}</b>
                -----
                <button @click="add(item)" :disabled="item.inventory===0">加入购物车</button>
            </li>
        </ul>
    </fieldset>
</template>
<script>
import { mapActions, mapState } from "vuex"

export default {
    computed:{
        ...mapState('product',['products'])
    },
    mounted(){
        this.FETCH_PRODUCT()
    },
    methods:{
        add(item){
            this.ADD_TO_CART(item)
        },
        ...mapActions('product',['FETCH_PRODUCT']),
        ...mapActions('cart',['ADD_TO_CART']),

    }
}
</script>
 